<template>
  <div class="computed-demo">
    <h2>Vue3 计算属性缓存机制演示</h2>

    <div class="demo-section">
      <h3>基础缓存演示</h3>
      <p>firstName: <input v-model="firstName" /></p>
      <p>lastName: <input v-model="lastName" /></p>
      <p>计算属性 fullName: {{ fullName }}</p>
      <p>再次访问 fullName: {{ fullName }}</p>
      <p>方法 getFullName(): {{ getFullName() }}</p>
      <p>再次调用 getFullName(): {{ getFullName() }}</p>
      <p>执行次数统计 - 计算属性: {{ computedCount }}, 方法: {{ methodCount }}</p>
    </div>

    <div class="demo-section">
      <h3>依赖追踪演示</h3>
      <p>number1: <input v-model.number="number1" type="number" /></p>
      <p>number2: <input v-model.number="number2" type="number" /></p>
      <p>无关变量: <input v-model="unrelated" /></p>
      <p>sum (计算属性): {{ sum }}</p>
      <p>sum执行次数: {{ sumComputedCount }}</p>
      <button @click="unrelated = Math.random().toString()">改变无关变量</button>
    </div>

    <div class="demo-section">
      <h3>复杂依赖演示</h3>
      <p>用户列表长度: {{ users.length }}</p>
      <p>活跃用户数量: {{ activeUsersCount }}</p>
      <p>活跃用户百分比: {{ activeUsersPercentage }}</p>
      <button @click="addUser">添加用户</button>
      <button @click="toggleUserStatus">切换第一个用户状态</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

// 基础缓存演示
const firstName = ref("张");
const lastName = ref("三");
const computedCount = ref(0);
const methodCount = ref(0);

// 计算属性 - 会缓存结果
const fullName = computed(() => {
  computedCount.value++;
  console.log("计算属性 fullName 被执行");
  return `${firstName.value}${lastName.value}`;
});

// 方法 - 每次调用都会执行
const getFullName = () => {
  methodCount.value++;
  console.log("方法 getFullName 被执行");
  return `${firstName.value}${lastName.value}`;
};

// 依赖追踪演示
const number1 = ref(1);
const number2 = ref(2);
const unrelated = ref("无关变量");
const sumComputedCount = ref(0);

const sum = computed(() => {
  sumComputedCount.value++;
  console.log("sum 计算属性被执行，依赖:", number1.value, number2.value);
  return number1.value + number2.value;
});

// 复杂依赖演示
interface User {
  id: number;
  name: string;
  active: boolean;
}

const users = ref<User[]>([
  { id: 1, name: "用户1", active: true },
  { id: 2, name: "用户2", active: false },
  { id: 3, name: "用户3", active: true },
]);

const activeUsersCount = computed(() => {
  console.log("计算活跃用户数量");
  return users.value.filter((user) => user.active).length;
});

const activeUsersPercentage = computed(() => {
  console.log("计算活跃用户百分比");
  if (users.value.length === 0) return 0;
  return Math.round((activeUsersCount.value / users.value.length) * 100);
});

const addUser = () => {
  const newId = users.value.length + 1;
  users.value.push({
    id: newId,
    name: `用户${newId}`,
    active: Math.random() > 0.5,
  });
};

const toggleUserStatus = () => {
  if (users.value.length > 0) {
    users.value[0].active = !users.value[0].active;
  }
};
</script>

<style scoped>
.computed-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.demo-section h3 {
  margin-top: 0;
  color: #333;
}

input {
  padding: 5px;
  margin: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  margin: 5px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

p {
  margin: 10px 0;
}
</style>
